<template>
  <div id="app" @click="showUserSet=false">
    <el-container id="containerfull">
      <!--header-->
      <el-header v-if="fullScreen&&isHide"
                 style="height:70px;background: -webkit-linear-gradient(left,#141729 45%,#12272c 70%,#112142 100%);">
        <div class="img-box">
          开封人社大数据平台
        </div>
        <div class="bar-box">
          <a v-show="showTopBar" v-for="(item,index) in leftBar"
             href="javascript:;"
             @click="chooseBar(index,item.sysMenu.url)" :class="barIndex==index?'bar-active':''">{{item.sysMenu.menuName
            }}</a>
        </div>
        <div class="admin-box">
          <ul class="admin-wrapper">
            <li class="admin-full-screen" @click="isFullScreen">
              <svg class="icon-svg" viewBox="0 0 60 60">
                <path :d="svgPath.fullScreen"/>
              </svg>
              <span>全屏</span>
            </li>
            <li class="admin-line"></li>
            <li class="admin-user" @click.stop="userSetFun">
              <svg class="icon-svg" viewBox="0 0 60 60">
                <path :d="svgPath.person"/>
              </svg>
              <span>{{userInfo.loginName}}</span>
            </li>
          </ul>
        </div>
      </el-header>
      <!--<div id="myLoading" v-show="showLoading"></div>-->
      <el-container>
        <!--leftNav-->
        <el-aside width="inherit" v-if="fullScreen&&isHide" v-show="showLeftBar">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#182536"
            text-color="#c0c0c0"
            active-text-color="#ffd04b"
            :collapse="isCollapse"
            default-active="1-2"
            :router='isRouter'
          >
            <el-menu-item index="">
              <p :class="isCollapse?'side-btn-open':'side-btn-retract'" @click="showBar"></p>
              <span v-show="isCollapse" slot="title">展开</span>
            </el-menu-item>
            <ul class="nav-level1" v-show="!isCollapse">
              <!--:href="item.url?item.url:'javascript:;'"-->
              <a v-for="(item,index) in chartNav" @click="chooseBarLevel(index,item,item.url,2)"
                 href="javascript:;" :class="item.childList?'':firstLevelIndex==index?'nav-active':''">
                <el-tooltip v-show="isCollapse||item.name!=item.nameEl" :key="index" class="item"
                            :enterable="!isCollapse"
                            effect="dark" :content="item.name" placement="right-start">
                  <p :class="firstLevelIndex==index?'bar1':''">
                    <b class="bar-image" :class="item.icon"></b>
                    <span v-show="!isCollapse">{{item.nameEl}}</span>
                    <i class="icon" v-show="!isCollapse"
                       :class="item.childList?isOpen(index)?'icon-arrow-up':'icon-arrow-down':''"></i>
                    <i class="icon" v-show="isCollapse"
                       :class="item.childList?isOpen(index)?'icon-arrow-up':'icon-arrow-left':'icon-arrow-left'"></i>
                  </p>
                </el-tooltip>
                <p v-show="!isCollapse&&item.name==item.nameEl"
                   :class="firstLevelIndex==index?'bar1':''">
                  <b class="bar-image" :class="item.icon"></b>
                  <span>{{item.nameEl}}</span>
                  <i class="icon" v-show="!isCollapse"
                     :class="item.childList?isOpen(index)?'icon-arrow-up':'icon-arrow-down':''"></i>
                  <i class="icon" v-show="isCollapse"
                     :class="item.childList?isOpen(index)?'icon-arrow-up':'icon-arrow-left':'icon-arrow-left'"></i>
                </p>
                <el-collapse-transition>
                  <ul v-if="item.childList" class="nav-level2" v-show="isOpen(index)">
                    <!--:href="data.url?data.url:'javascript:;'"-->
                    <a v-for="(data,i) in item.childList"
                       :class="secondLevelIndex==`${index}${i}`?'nav-active-next':''"
                       @click.stop="chooseBarLevelNext(i,index,data.url)">
                      <el-tooltip v-show="isCollapse||data.name!=data.nameEl" :key="i" class="item" effect="dark"
                                  :content="data.name" placement="left" :enterable="!isCollapse">
                        <p class="subBar1" :class="secondLevelIndex==`${index}${i}`?'nav-active-next':''">
                          <i class="third-bar-left"></i>
                          <span>{{data.nameEl}}</span>
                        </p>
                      </el-tooltip>
                      <p class="subBar1" v-show="!isCollapse&&data.name==data.nameEl"
                         :class="secondLevelIndex==`${index}${i}`?'nav-active-next':''">
                        <i class="third-bar-left"></i>
                        <span>{{data.nameEl}}</span>
                      </p>
                    </a>
                  </ul>
                </el-collapse-transition>
              </a>
            </ul>
            <ul class="nav-level1" v-show="isCollapse">
              <a v-for="(item,index) in chartNav" @click="chooseBarLevel(index,item,item.url,1)"
                 href="javascript:;" :class="firstLevelIndex==index?'nav-active':''">
                <el-tooltip  :key="index" class="item noPadding"
                            enterable
                            popper-class="noPadding"
                            effect="dark"  placement="right-start">
                  <p :class="firstLevelIndex==index?'bar1':''">
                    <b class="bar-image" style="margin-left:26px;" :class="item.icon"></b>
                    <div slot="content" class="third-bar noHover">{{item.nameEl}}</div>
                    <div v-if="item.childList"  slot="content" class="third-bar noHover" style="padding:0;height:1px;">
                      <span  class="bar-line" ></span>
                    </div>
                    <div class="third-bar"  slot="content" v-for="(data,i) in item.childList"
                       :class="secondLevelIndex==`${index}${i}`?'nav-active-next':''"
                       @click.stop="chooseBarLevelNext(i,index,data.url)">{{data.name}}</div>
                  </p>
                </el-tooltip>
                <!--<p v-show="!item.childList" :class="firstLevelIndex==index?'bar1':''">-->
                  <!--<b class="bar-image" style="margin-left:26px;" :class="item.icon"></b>-->
                <!--</p>-->
              </a>
            </ul>
          </el-menu>
        </el-aside>
        <el-container>
          <!--startprint-->
          <!--<el-scrollbar style="width:100%;height:100%">-->
          <el-main :style="mainBackColor">
            <keep-alive>
              <router-view :pageChange="pageChange" :isChange="isChange" :fullScreen="fullScreen" v-if="$route.meta.keepAlive"
                           :isCollapse="isCollapse"/>
            </keep-alive>
            <router-view :pageChange="pageChange" :isChange="isChange" :fullScreen="fullScreen" v-if="!$route.meta.keepAlive"
                         :isCollapse="isCollapse"></router-view>
          </el-main>
          <!--</el-scrollbar>-->
          <!--endprint-->
        </el-container>
      </el-container>
    </el-container>
    <!-- 头部右下角下拉 -->
    <transition enter-active-class="animated slideInDown" leave-active-class="animated slideOutUp">
      <ul class="head-user-set" v-show="showUserSet">
        <li @click="userInfoFun" class="userinfo">个人信息</li>
        <li @click="updatePwdFun" class="pwd">修改密码</li>
        <li class="zhuti"><span>主题</span><i class="white" @click="whiteFun"></i><i class="black" @click="blackFun"></i>
        </li>
        <li class="logout" @click="logout">注销</li>
      </ul>
    </transition>
    <!-- 用户信息弹窗 -->
    <dap-popover ref="refUserInfoPopover" :titleText="'个人信息'" :hideBtn="true">
      <ul class="user-info-wrapper">
        <li>
          <span>账号</span>
          <span>{{userJobUnit.loginName}}</span>
        </li>
        <li>
          <span>姓名</span>
          <span>{{userJobUnit.userName}}</span>
        </li>
        <li>
          <span>性别</span>
          <span>{{userJobUnit.sexName}}</span>
        </li>
        <li>
          <span>职位</span>
          <span>{{userJobUnit.jobName}}</span>
        </li>
        <li>
          <span>所属部门</span>
          <span>{{userJobUnit.deptName}}</span>
        </li>
        <li>
          <span>组织机构</span>
          <span>{{userJobUnit.unitName}}</span>
        </li>
      </ul>
    </dap-popover>
    <!-- 修改密码弹窗 -->
    <dap-popover ref="refUpdatePwdPopover" :titleText="'修改密码'" @clickLeft='requireBtnFun' :hideRightBtn="true">
      <ul class="add-user-wrapper">
        <li>
          <div class="add-user-item">
            <i class="red-star">*</i><span class="add-text">原始密码：</span>
            <input type="text" v-model="oldPwd" class="dap-input"
                   :class="{'error-input-border':errorOldPwd}" placeholder="请输入原始密码（初始密码为123456）" maxlength="16">
          </div>
          <p class="tip-text"><span v-show="errorOldPwd">{{errorOldPwd}}</span></p>
        </li>
        <li>
          <div class="add-user-item">
            <i class="red-star">*</i><span class="add-text">新密码：</span>
            <input type="password" v-model="newPwd" class="dap-input" :class="{'error-input-border':errorNewPwd}"
                   placeholder="6-16位以内数组加字母组合" maxlength="16">
          </div>
          <p class="tip-text"><span v-show="errorNewPwd">{{errorNewPwd}}</span></p>
        </li>
        <li>
          <div class="add-user-item">
            <i class="red-star">*</i><span class="add-text">确认新密码：</span>
            <input type="password" v-model="towNewPwd" class="dap-input" :class="{'error-input-border':errorTowNewPwd}"
                   placeholder="请重新输入新密码" maxlength="16">
          </div>
          <p class="tip-text"><span v-show="errorTowNewPwd">{{errorTowNewPwd}}</span></p>
        </li>
      </ul>
    </dap-popover>
    <dapPopover ref="goToL"  @clickLeft='goToL' :hideRightBtn="true">
      <p class="goLoginTxt">{{goLoginTxt}}</p>
    </dapPopover>
  </div>
</template>

<script>
  import { getLeftBar } from "./api/api";
  import "./assets/css/main.css";
  import { svgPath, loadingOpt , forbiddenBackCode} from "./assets/js/utils.js";
  import { getUserInfo, resetPwd, logout, filterLogText } from "./api/authority.js";
  // 修改密码，用户信息等 弹出窗
  import dapPopover from "./components/view/dap-popover.vue";
  import md5 from "js-md5";
  import { bus } from "./components/last/filter/js/bus";

  export default {
    name: "App",
    props:['isGoLogin','goLoginTxt','changeNav'],
    watch:{
      isGoLogin(val){
        if(val){
          this.$refs.goToL.show();
        }
      },
      changeNav(){
        //当接口返回 403 500 405时刷新导航栏
        this.getMenu();
      }
    },
    data() {
      return {
        bkUrl:'./assets/img/five-risks-image/five-risks-icon.png',
        showLeftBar: true,
        userInfo: {
          loginName:'user'
        },         //用户登录信息
        oldPwd: "",         // 旧密码
        newPwd: "",         // 新密码
        towNewPwd: "",      // 再次新密码
        errorOldPwd: "",    // 旧密码错误提示
        errorNewPwd: "",    // 新密码错误提示
        errorTowNewPwd: "", // 再次新密码错误提示
        showUserSet: false, // 头部下拉显示隐藏
        userJobUnit: "",      // 用户职位单位部门等信息
        isRouter: true,
        isCollapse: false,
        activeIndex: "1",
        fullScreen: true,
        isChange: 1,
        barIndex: sessionStorage.getItem("barIndex") ? sessionStorage.getItem("barIndex") : 0,
        svgPath: svgPath,
        menuNum: 1,
        isHide: false,
        mainBackColor: {
          background: "-webkit-linear-gradient(left bottom,#181e2c 0%,#262721 27%,#1e3930 34%,#252f4a 72%,#1e2247 100%)"
        },
        chartNav: [],
        leftBar: [],
        firstLevelIndex: sessionStorage.getItem("firstLevelIndex") || 0,
        secondLevelIndex: sessionStorage.getItem("secondLevelIndex") || "00",
        firstLevelOpen: JSON.parse(sessionStorage.getItem("firstLevelOpen")) || [],
        showLoading: true,
        goUrl: "",
        showTopBar: false,
        pageChange:1
      };
    },
    components: {
      dapPopover
    },
    created() {
      bus.$on("changeMenuList", () => {
        //菜单管理 成功回调
        this.getMenu(1);
      });
    },
    mounted() {
      let that = this;
      // 检测点击backspace后阻止默认行为 检测ie 给ie添加路由跳转
      forbiddenBackCode(that);
      // this.myChart = this.$echarts.init(document.getElementById('myLoading') ,null, {renderer: 'canvas'})
      //给echart 加loading效果
      // this.myChart.showLoading(loadingOpt)
      window.onhashchange = window.onload = function() {
        // bus.$emit('pageChange')
        that.pageChange++;
        that.showLoading = false;
        // that.isHide = true;
        setTimeout(() => {
          that.isChange++;
        }, 10);

        if (that.$router.currentRoute.path == "/" || that.$router.currentRoute.path == "#/") {
          that.isHide = false;
          window.sessionStorage.clear();
          that.firstLevelIndex = 0;
          that.secondLevelIndex = '00';
          that.firstLevelOpen = [];
          that.isCollapse = false;
          that.barIndex = 0;
          that.showTopBar = false;
          that.leftBar = [];
          that.chartNav = [];
          that.firstLevelOpen.push(0);
          sessionStorage.setItem("firstLevelOpen", JSON.stringify(that.firstLevelOpen));
        } else if (that.$router.currentRoute.path == "/welcome") {
          that.isHide = true;
          that.userInfo = window.sessionStorage.getItem("sessionUser");
          if (that.userInfo) {
            that.userInfo = JSON.parse(that.userInfo);
            that.userId = JSON.parse(sessionStorage.getItem('sessionUser')).userId;
          }
        } else {
          that.isHide = true;
          that.showLeftBar = true;
          that.showLoading = true;
          that.userInfo = window.sessionStorage.getItem("sessionUser");
          if (that.userInfo) {
            that.userInfo = JSON.parse(that.userInfo);
            that.userId = JSON.parse(sessionStorage.getItem("sessionUser")).userId;
            that.getMenu();
          }
          if (!that.userInfo) {
            window.location.href = "#/";
          }
        }
      };
      //检测屏幕尺寸变化，当退出全屏时执行操作
      window.onresize = function() {
        if (!that.checkFull()) {
          //要执行的动作
          if (!that.fullScreen) {
            that.fullScreen = !that.fullScreen;
          }
          setTimeout(() => {
            that.isChange++;
          }, 10);
        }
      };
    },
    methods: {
      goToL(){
        this.$refs.goToL.hide();
        window.location.href = '#/';
        this.$emit('clickConfirm');
      },
      // 获取菜单数据
      getMenu(type) {
        let routerPath = `#${this.$router.currentRoute.path}`;
        // let routerPath = this.goUrl;
        let isGoTo = false;
        this.showLoading = true;
        getLeftBar("queryMenuMap", this.userId)
          .then(res => {
          if (res.code == 0) {
            this.userInfo.perminsStrlist=res.data.perminsStrlist;
            window.sessionStorage.setItem('sessionUser',JSON.stringify(this.userInfo))
            this.showTopBar = true;
            let leftBar = res.data.menu;
            if (leftBar) {
              leftBar.map((item, index) => {
                if(type){
                  if(item.sysMenu.url.indexOf('authority')>0){
                    this.barIndex = index;
                  }
                }
                if (item.childList) {
                  item.childList.map((mes, i) => {
                    mes.nameEl = filterLogText(mes.sysMenu.menuName);
                    mes.name = mes.sysMenu.menuName;
                    mes.url = mes.sysMenu.url;
                    mes.icon = mes.sysMenu.urlDesc;
                    if(type){
                      if(mes.url.indexOf('authority/menu-setting')>0){
                        this.firstLevelIndex = i;
                      }
                    }
                    if (mes.childList) {
                      mes.childList.map(data => {
                        data.nameEl = filterLogText(data.sysMenu.menuName);
                        data.name = data.sysMenu.menuName;
                        data.url = data.sysMenu.url;
                        data.icon = data.sysMenu.urlDesc;
                      });
                    }
                  });
                }
              })
              res.data.urls.map(item => {
                if (item != "" && item == routerPath) {
                  isGoTo = true;
                }
              });
              this.leftBar = leftBar;
              if (this.leftBar[this.barIndex]) {
                this.chartNav = this.leftBar[this.barIndex].childList;
              }

              if (routerPath) {
                if (isGoTo || this.$router.currentRoute.name == 'detail') {
                  // window.location.href = routerPath;
                } else{
                  window.location.href = '#/welcome';
                  this.firstLevelIndex = -1;
                  this.secondLevelIndex = "-10";
                  this.firstLevelOpen = [];
                  this.isCollapse = false;
                  this.barIndex = -1;
                }
              }
            } else {
              this.chartNav = [];
              this.leftBar = [];
              // this.showLeftBar = false;
              window.location.href = "#/welcome";
            }
          }
          this.showLoading = false;
        })
      },
      isOpen(index) {
        if (this.firstLevelOpen.indexOf(index) == -1) {
          return false;
        } else {
          return true;
        }
      },
      //选择二级菜单
      chooseBarLevel(i, item, url,type) {
        if(type==1&&item.childList){
          return;
        }
        if (this.firstLevelOpen.indexOf(i) == -1) {
          this.firstLevelOpen.push(i);
        } else {
          let index = this.firstLevelOpen.indexOf(i);
          this.firstLevelOpen.splice(index, 1);
        }
        sessionStorage.setItem("firstLevelOpen", JSON.stringify(this.firstLevelOpen));
        if (!item.childList){
          this.firstLevelIndex = i;
          sessionStorage.setItem("firstLevelIndex", i);
          this.secondLevelIndex = "-10";
          sessionStorage.setItem("secondLevelIndex", `-10`);
        }
        this.goUrl = url;
        if (url) {
          window.location.href = url;
        }
      },
      // 选择三级菜单
      chooseBarLevelNext(i, index, url) {
        this.secondLevelIndex = `${index}${i}`;
        sessionStorage.setItem("secondLevelIndex", `${index}${i}`);
        this.firstLevelIndex = index;
        sessionStorage.setItem("firstLevelIndex", index);
        this.goUrl = url;
        if (url) {
          if(document.querySelector('.el-main')){
            document.querySelector('.el-main').scrollTop = 0 + 'px';
          }
          window.location.href = url;
        }
        // this.getMenu();
        return;
        //点击导航时 检测此时是否有此链接权限，若有跳转，若无跳到欢迎页。
        if (url != "") {
          let goTo = function(that) {
            let isGoTo = false;
            that.leftBar.map((item, index) => {
              if (item.childList) {
                item.childList.map((mes, index) => {
                  if (mes.childList) {
                    mes.childList.map(data => {
                      if (url == data.url) {
                        isGoTo = true;
                      }
                    });
                  }
                });
              }
            });
            if (isGoTo) {
              window.location.href = url;
            } else {
              window.location.href = "#/welcome?type=1";
              that.firstLevelIndex = -1;
              that.secondLevelIndex = "-10";
              that.firstLevelOpen = [];
              that.isCollapse = true;
              that.barIndex = -1;
            }
          };
          this.getMenu(goTo);
        }
      },
      // 导航标题多余七个字省略号
      ellipsisTxt(arr) {
        arr.map(item => {
          item.nameEl = filterLogText(item.name);
          if (item.childList) {
            this.ellipsisTxt(item.childList);
          }
        });
      },
      //选择一级菜单
      chooseBar(num, url) {
        if(this.barIndex==num){
          return;
        }
        this.barIndex = num;
        sessionStorage.setItem("barIndex", num);
        if (this.leftBar[num]) {
          this.chartNav = this.leftBar[num].childList;
        }
        this.firstLevelIndex = 0;
        this.secondLevelIndex = "00";
        this.firstLevelOpen = [];
        this.firstLevelOpen.push(0);
        sessionStorage.setItem("firstLevelOpen", JSON.stringify(this.firstLevelOpen));
        this.isCollapse = false;
        this.goUrl = url;
        if (url) {
          if(document.querySelector('.el-main')){
            document.querySelector('.el-main').scrollTop = 0 + 'px';
          }
          window.location.href = url;
        }
      },
      chooseNextBar(index, i) {
        return `${index}${i}`;
      },
      showBar() {
        this.isCollapse = !this.isCollapse;
        setTimeout(() => {
          this.isChange++;
        }, 300);
      },
      //检测是否可退出
      checkFull() {
        let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
        //to fix : false || undefined == undefined
        if (isFull === undefined) {
          isFull = false;
        }
        return isFull;
      },
      //浏览器退出全屏
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      },
      //浏览器全屏
      launchFullscreen(element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      },
      isFullScreen() {
        let element = document.documentElement;
        this.launchFullscreen(element);

        this.fullScreen = !this.fullScreen;
        setTimeout(() => {
          this.isChange++;
        }, 10);
      },
      // 头部用户名点击
      userSetFun() {
        this.showUserSet = !this.showUserSet;
      },
      // 用户信息
      userInfoFun() {
        getUserInfo({ loginName: this.userInfo.loginName }).then((res) => {
          if (res.code === 0) {
            this.userJobUnit = res.data.selfinfo;
            this.$refs.refUserInfoPopover.show();
          }
        });
      },
      // 修改密码
      updatePwdFun() {
        this.oldPwd = "";
        this.newPwd = "";
        this.towNewPwd = "";
        this.$refs.refUpdatePwdPopover.show();
      },
      // 注销
      logout() {
        logout();
        window.sessionStorage.clear();
        window.location.href = "#/";
        this.firstLevelIndex = 0;
        this.secondLevelIndex = "00";
        this.firstLevelOpen = [];
        this.isCollapse = false;
        this.barIndex = 0;
        this.showTopBar = false;
        this.leftBar = []
        this.chartNav = []
        this.$router.push('/login');
      },
      // 修改密码弹窗按钮
      requireBtnFun() {
        this.oldPwd = this.oldPwd.trim();
        this.newPwd = this.newPwd.trim();
        this.towNewPwd = this.towNewPwd.trim();
        let regPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
        if (!this.oldPwd) {
          this.errorOldPwd = "原密码不能为空";
        } else {
          this.errorOldPwd = false;
        }
        if (!this.newPwd) {
          this.errorNewPwd = "新密码不能为空";
        } else if (!regPwd.test(this.newPwd)) {
          this.errorNewPwd = "新密码格式不正确";
        } else {
          this.errorNewPwd = "";
        }
        if (!this.towNewPwd) {
          this.errorTowNewPwd = "确认密码不能为空";
        } else if (this.towNewPwd !== this.newPwd) {
          this.errorTowNewPwd = "确认密码与新密码不一致";
        } else {
          this.errorTowNewPwd = "";
        }
        if ((!this.errorOldPwd) && (!this.errorNewPwd) && (this.towNewPwd == this.newPwd)) {
          let data = {
            loginName: this.userInfo.loginName,
            oldPassword: md5(this.oldPwd),
            password: md5(this.newPwd)
          };
          resetPwd(data).then((res) => {
            if (res.code === 0) {
              this.$refs.refUpdatePwdPopover.hide();
              this.$message({
                message: "修改密码成功！",
                center: true,
                type: "success"
              });
            } else if (res.code == 42) {
              this.errorOldPwd = "原密码错误";
            } else if (res.code == 41) {
              this.$message({
                message: "修改密码失败！",
                center: true,
                type: "success"
              });
            }
          });
        }
      },
      // 切换白色主题
      whiteFun() {
        alert("白色主题");
      },
      // 切换黑色主题
      blackFun() {
        alert("黑色主题");
      }
    }
  }
</script>

<style scoped>
  a {
    text-decoration: none;
  }

  .nav-level1, .nav-level2 {
    width: 100%;
    box-sizing: border-box;
    line-height: 48px;
    overflow: hidden;
    white-space: nowrap;
  }

  .nav-level2 a {
    color: #707a85;
  }

  .nav-level2 {
    background-color: #182536;
    clear: both;
  }

  .nav-level1 a{
    display: block;
    text-decoration: none;
    font-size: 14px;
    overflow: hidden;
    color: #fff;
    background-color:#0f1e31;
  }
  .nav-level2 a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    overflow: hidden;
    background-color:#182536;
    color:  #70757c;
  }
  .arrow-down {
    background: url("./components/last/filter/img/arrow_down.png") no-repeat 180px 18px;
    background-size: 10px 5px;
  }

  .arrow-up {
    background: url("./components/last/filter/img/arrow_up.png") no-repeat 180px 18px;
    background-size: 10px 5px;
  }

  .barIcon {
    float: left;
    font-size: 20px;
    padding-left: 23px;
    line-height: 48px;
  }

  .nav-level1 a span {
    /*padding-left: 25px;*/
    float: left;
  }

  .nav-level1 a .icon {
    float: right;
    line-height: 48px;
    padding-right: 24px;
  }

  .nav-level2 a span {
    float: left;
    /*padding-left: 10px;*/
  }

  .nav-level1 p {
    overflow: hidden;
    height: 48px;
  }

  .nav-level1 .bar1 {
    overflow: hidden;
  }

  .nav-level1 p:hover {
    background-color: #222b48;
    color: #fff;
  }

  .nav-level1 .subBar1:hover {
    background-color: #222b48;
    color: #b7bbbf;
  }
  .nav-level1 .bar1{
    background-color: #1f2d57;
    color: #fff;
  }
  .nav-level1 .bar1:hover {
    background-color: #1f2d57;
    color: #fff;
  }

  .nav-level1 .nav-active {
    background-color: #b52441;
    color: #fff;
  }
  /*.nav-level2 a:hover {*/
    /*background-color: #707a85;*/
    /*color: #fff;*/
  /*}*/
  .nav-level2 a:hover {
    background-color: #222b48;
    color: #fff;
  }

  .nav-level2 .nav-active-next {
    background-color: #b52441;
    color: #fff;
  }
  .nav-level2 .nav-active-next:hover {
    background-color: #b52441;
    color: #fff;
  }
  .nav-active-next {
    background-color: #b52441;
    color: #fff;
  }
  .nav-active-next:hover {
    background-color: #b52441;
    color: #fff;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
  }

  .el-container {
    height: 100%;
    box-sizing: border-box;
  }

  .el-main {
    padding: 0;
    background: -webkit-linear-gradient(left bottom, #181e2c 0%, #262721 27%, #1e3930 34%, #252f4a 72%, #1e2247 100%);
    background: linear-gradient(left bottom, #181e2c 0%, #262721 27%, #1e3930 34%, #252f4a 72%, #1e2247 100%);
  }

  .el-header {
    padding: 0;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000002;
    background: #112142;
    background: -webkit-linear-gradient(left, #141729 45%, #12272c 70%, #112142 100%);
    background: -o-linear-gradient(left, #141729 45%, #12272c 70%, #112142 100%);
    background: -moz-linear-gradient(left, #141729 45%, #12272c 70%, #112142 100%);
    background: -mos-linear-gradient(left, #141729 45%, #12272c 70%, #112142 100%);
    background: linear-gradient(left, #141729 45%, #12272c 70%, #112142 100%);
  }

  .el-menu--horizontal {
    border-bottom: 0;
  }

  .el-menu {
    border-right: 0;
  }

  .el-menu-item, .el-submenu__title {
    height: 44px;
    line-height: 44px;
  }

  .el-aside {
    /*position:fixed;*/
    padding-top: 70px;
    /* left:0;*/
  }

  .el-menu-item-group__title {
    display: none;
    background: red;
  }

  .icon-svg {
    width: 28px;
    height: 28px;
    margin-top: 21px;
    margin-right: 10px;
    float: left;
  }

  .noStyle {
    border: 0;
    background: 0;
    padding: 0;
    margin: 0;
    color: inherit;
  }

  .el-main::-webkit-scrollbar { /*滚动条整体样式*/
    /*width: 4px; !*高宽分别对应横竖滚动条的尺寸*!*/
    /*height: 4px;*/
  }

  .el-main::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);*/
    /*background: rgba(255, 255, 255, 0.2);*/
  }

  .el-main::-webkit-scrollbar-track { /*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);*/
    /*border-radius: 0;*/
    /*background: rgba(255, 255, 255, 0.1);*/
  }

  .head-user-set {
    position: fixed;
    right: 20px;
    top: 70px;
    color: #fffdfd;
    width: 180px;
    background-color: #1a2940;
    cursor: pointer;
    z-index: 10000001;
    border: 1px solid #313d4f;
    border-radius: 4px;
  }

  .head-user-set > li {
    font-size: 12px;
    padding: 16px 0;
    padding-left: 36px;
    background-image: url("./assets/img/userinfo/logout.png");
    background-repeat: no-repeat;
    background-position: 18px center;
  }

  .head-user-set .userinfo {
    background-image: url("./assets/img/userinfo/user.png");
  }

  .head-user-set .userinfo:hover {
    background-image: url("./assets/img/userinfo/user_1.png");
  }

  .head-user-set .pwd {
    background-image: url("./assets/img/userinfo/pwd.png");
  }

  .head-user-set .pwd:hover {
    background-image: url("./assets/img/userinfo/pwd_1.png");
  }

  .head-user-set .zhuti {
    padding: 0;
    padding-left: 36px;
    height: 40px;
    display: flex;
    align-items: center;
    background-image: url("./assets/img/userinfo/zhuti.png");
  }

  .head-user-set .zhuti:hover {
    background-image: url("./assets/img/userinfo/zhuti_1.png");
  }

  .head-user-set .logout:hover {
    background-image: url("./assets/img/userinfo/logout_1.png");
  }

  .head-user-set .zhuti span {
    width: 80px;
  }

  .head-user-set > li:hover {
    background-color: #314d7a;
    color: #fff;
  }

  /* 用户信息 */
  .user-info-wrapper {
    box-sizing: border-box;
    padding: 15px 0;
    width: 400px;
  }

  .user-info-wrapper li {
    display: flex;
    align-items: center;
    line-height: 40px;
    padding-left: 30px;
  }

  .user-info-wrapper li span:first-child {
    width: 80px;
  }

  .user-info-wrapper li span:last-child {
    color: #969ca5;
  }

  /* 修改密码*/
  /* 添加用户弹窗*/
  .add-user-wrapper {
    box-sizing: border-box;
    font-size: 12px;
    width: 400px;
    padding: 30px 30px 0px 26px;
  }

  .add-user-wrapper .add-user-item {
    display: flex;
    align-items: center;
  }

  .add-user-wrapper > li:last-child {
    position: relative;
    z-index: 1;
  }

  .add-user-wrapper .add-text {
    width: 80px;
  }

  .add-user-wrapper .dap-input {
    flex: 1 1 auto;
    height: 26px;
  }

  /* 主题 */
  .white, .black {
    flex: 1 1 auto;
    display: inline-block;
    height: 100%;
    line-height: 40px;
    text-align: center;
    width: 30px;
    box-sizing: border-box;
  }

  .white:before, .black:before {
    display: inline-block;
    content: '';
    height: 10px;
    width: 10px;
    border-radius: 50%;
    box-shadow: 0 0 5px 2px #0a82d8;
  }

  .white:before {
    background-color: #fff;
  }

  #app .tip-text {
    padding-left: 90px;
  }

  /* 头部下拉动画*/
  #app .animated {
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
  }
</style>
<style>
  /* 动画*/
  #app .animated {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
  }

  #app .dap-popover-wrapper {
    border-radius: 3px;
  }

  #myLoading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 70px;
    left: 0;
    z-index: 99999;
  }

  .el-scrollbar__wrap {
    overflow: auto;
  }

  .el-scrollbar__view {
    height: 100%;
  }

  .el-main {
    height: 100%;
  }
  .goLoginTxt{
    margin-top:20px;
    line-height:32px;
    color:#fff;
    font-size:14px;
    text-align:center;
  }


  /*leftbar新样式*/
  .bar-image{
    width:14px;
    height:100%;
    margin-right:10px;
    background-repeat:no-repeat;
    background-position:center;
    float:left;
    margin-left:20px;
    background-size:14px;
  }
  .third-bar-left{
    float:left;
    width:14px;
    height:100%;
    margin-right:10px;
    margin-left:20px;
  }
  .third-bar{
    padding:12px;
    cursor:pointer;
    background:#1d2b3c;
    min-width:120px;
  }
  .bar-line{
    margin:0 12px;
    height:1px;
    background:#263a59;
    line-height:0;
    display:block;
  }
  .third-bar:hover{
    background:#20324f;
    color: #b7bbbf;
  }
  .noHover{
    color:#4f6882;
    cursor:inherit;
    background:#1d2b3c;
  }
  .noHover:hover{
    background:#1d2b3c;
    color:#4f6882;
  }
  .noPadding{
    padding:0;
    /*background:#1d2b3c;*/
  }





  /*二级导航前都得icon*/
  .user-icon{
    background-image:url('./assets/img/five-risks-image/user-icon.svg');
  }
  .role-icon{
    background-image:url('./assets/img/five-risks-image/role-icon.svg');
  }
  .menu-icon{
    background-image:url('./assets/img/five-risks-image/menu-icon.svg');
  }
  .department-icon{
    background-image:url('./assets/img/five-risks-image/department-icon.svg');
  }
  .birth-icon{
    background-image:url('./assets/img/five-risks-image/birth-icon.png')
  }
  .five-risks-icon{
    background-image:url('./assets/img/five-risks-image/five-risks-icon.png')
  }
  .injury-on-the-job-icon{
    background-image:url('./assets/img/five-risks-image/injury-on-the-job-icon.png')
  }
  .medical-insurance-icon{
    background-image:url('./assets/img/five-risks-image/medical-insurance-icon.png')
  }
  .pension-icon{
    background-image:url('./assets/img/five-risks-image/pension-icon.png')
  }
  .unemployment-icon{
    background-image:url('./assets/img/five-risks-image/unemployment-icon.png')
  }
  .human-resources-icon{
    background-image: url("./assets/img/five-risks-image/human-resource.svg");
  }
</style>
